<template>
  <el-row>
    <el-col :span="24">
        <div v-for="(item, index) in fieldValue" :key="index" class="vertical-align-top">
          <div class="line multi-box right-space">
            <KindEditor :content.sync="fieldValue[index]" editor-type="Input"/>
          </div>
          <div class="line vertical-align-top">
            <el-button title="删除" circle size="small" icon="el-icon-delete" type="danger" @click.stop="deleteValue(index)"></el-button>
            <el-button title="上移" circle size="small" icon="el-icon-top" :disabled='index === 0' @click.stop="moveUp(index)"></el-button>
            <el-button title="下移" circle size="small" icon="el-icon-bottom" :disabled='index === fieldValue.length - 1' @click.stop="moveUp(index + 1)"></el-button>
          </div>
        </div>
        <div class="line vertical-align-top">
          <el-button icon="el-icon-plus" plain type="primary" @click="addValue" size="small">新增</el-button>
        </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'MultiValueBox',
  props: {
    fieldValue: {
      type: Array,
      default: [],
    }
  },
  methods: {
    addValue() {
      this.fieldValue.push("")
    },
    deleteValue(index) {
      this.fieldValue.splice(index, 1)
    },
    moveUp(index) {
      let preItem = this.fieldValue[index - 1]
      this.fieldValue.splice(index - 1, 1, this.fieldValue[index])
      this.fieldValue.splice(index, 1, preItem)
    }
  }
}
</script>
<style scoped>
.line {
  display: inline-block;
}

.right-space {
  margin-right: 10px;
}

.multi-box {
  width: 300px;
}

.img-preview-block img {
  max-width: 600px;
  max-height: 600px;
}

.vertical-align-top {
  vertical-align: top;
}

</style>
